<template>
    <!-- 评论列表容器 -->
    <ul class="comment-list">
        <!-- 遍历评论列表 -->
        <li v-for="(item, index) in Demo2" :key="index" class="comment-item">
            <!-- 主评论内容 -->
            <div class="comment-main">
                <!-- 用户头像占位符 -->
                <div class="avatar-placeholder"></div>
                <!-- 评论右侧内容 -->
                <div class="comment-right">
                    <div class="comment-content">
                        <!-- 评论头部信息 -->
                        <div class="comment-header">
                            <span class="comment-id">{{ item.id }}</span>
                        </div>
                        <!-- 评论正文 -->
                        <div class="comment-body">
                            {{ item.content }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 子评论区域 -->
            <div v-if="item.children && item.children.length" class="comment-replies">
                <!-- 显示子评论列表 -->
                <ul v-if="item.showReplies" class="comment-children">
                    <!-- 遍历子评论 -->
                    <li v-for="(child, childIndex) in item.children" :key="childIndex" class="comment-item">
                        <div class="comment-main">
                            <div class="avatar-placeholder"></div>
                            <div class="comment-right">
                                <div class="comment-content">
                                    <div class="comment-header">
                                        <span class="comment-id">{{ child.id }}</span>
                                    </div>
                                    <div class="comment-body">
                                        {{ child.content }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- 分割线组件 -->
                <van-divider content-position="left"  style="cursor: pointer;">
                    <span @click="toggleReplies(index)">{{ item.showReplies ? '收起回复' : `展开${item.children.length}条回复` }}</span>
                </van-divider>
            </div>
        </li>
    </ul>
</template>

<script setup>
// 获取当前组件实例
const { proxy } = getCurrentInstance();

// 定义响应式变量，存储评论数据
const Demo2 = ref([]);

// 切换显示/隐藏回复
const toggleReplies = (index) => {
    Demo2.value[index].showReplies = !Demo2.value[index].showReplies;
};

// 将平铺的评论列表转换为树形结构
function getTreeList(rootList, parentId = 0) {
    return rootList
        .filter(item => item.comment_id === parentId)
        .map(item => ({
            ...item,
            showReplies: false, // 初始化是否显示回复
            children: getTreeList(rootList, item.id) // 递归获取子评论
        }))
        .filter(item => item.children?.length > 0 || delete item.children);
}

// 组件挂载前执行
onBeforeMount(() => {
    console.log("组件即将挂载");
    demo();
});

// 获取评论数据
const demo =  () => {
    // let result = await proxy.$http.post({
        // url: "/share/comment",
    // });
    if (false) {
        // Demo2.value = getTreeList(result.data);
        // console.log("🚀 ~ file: demo2.vue:65 ~ demo ~ Demo2.value:", Demo2.value)
    } else {
        // proxy.$warning(result.msg);
        [
    {
        "id": 1,
        "comment_id": 0,
        "content": "这是第一条评论。",
        "children": [
            {
                "id": 2,
                "comment_id": 1,
                "content": "这是对第一条评论的回复。"
            },
            {
                "id": 3,
                "comment_id": 1,
                "content": "这是第一条评论的另一个回复。"
            }
        ]
    },
    {
        "id": 4,
        "comment_id": 0,
        "content": "这是第二条评论。",
        "children": [
            {
                "id": 5,
                "comment_id": 4,
                "content": "这是对第二条评论的回复。"
            }
        ]
    },
    {
        "id": 6,
        "comment_id": 0,
        "content": "这是第三条评论。",
        "children": []
    }]
};
}
</script>

<style scoped>
/* 评论列表容器样式 */
.comment-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 16px;
}

/* 单个评论项样式 */
.comment-item {
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid #f8f8f8;
}

.comment-item:last-child {
    border-bottom: none;
}

/* 头像占位符样式 */
.avatar-placeholder {
    width: 30px;
    height: 30px;
    background-color: #f8f8f8;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 评论主体布局 */
.comment-main {
    display: flex;
    gap: 12px;
    width: 100%;
}

.comment-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 评论头部样式 */
.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-id {
    font-weight: 500;
    color: #333;
    font-size: 1em;
}

/* 评论正文样式 */
.comment-body {
    color: #333;
    font-size: 0.9em;
    line-height: 1.4;
    margin: 4px 0;
}

/* 评论操作区域 */
.comment-actions {
    margin-top: 8px;
}

/* 子评论样式 */
.comment-children {
    margin-top: 10px;
    padding-left: 40px;
}

.comment-children .comment-item {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid #f8f8f8;
}

.comment-children .comment-item:last-child {
    border-bottom: none;
}

.comment-children .comment-main {
    display: flex;
    gap: 12px;
    width: 100%;
}

.comment-children .comment-right {
    padding-left: 0;
}

.comment-children .comment-id {
    color: #333;
    font-size: 0.95em;
}

.comment-children .comment-body {
    color: #333;
    font-size: 0.9em;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
    .comment-list {
        padding: 10px;
    }

    .comment-children {
        padding-left: 15px;
    }
}
</style>
